<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { CloudUploadOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import type { CloudStorage } from '../types';

const files = ref<CloudStorage[]>([]);
const isUploading = ref(false);
const uploadProgress = ref(0);
const password = ref('');
const expiryDays = ref(7);

const handleFileSelect = async (file: File) => {
  if (!file) return;

  isUploading.value = true;
  uploadProgress.value = 0;

  // 模拟上传进度
  const interval = setInterval(() => {
    if (uploadProgress.value < 100) {
      uploadProgress.value += 10;
    } else {
      clearInterval(interval);
      isUploading.value = false;
      
      // 添加到文件列表
      files.value.unshift({
        id: crypto.randomUUID(),
        fileName: file.name,
        fileSize: file.size,
        uploadTime: new Date().toISOString(),
        expiryTime: new Date(Date.now() + expiryDays.value * 24 * 60 * 60 * 1000).toISOString(),
        password: password.value || undefined,
        downloadCount: 0
      });

      message.success('文件上传成功！');

      // 重置表单
      password.value = '';
      uploadProgress.value = 0;
    }
  }, 300);
};

const beforeUpload = (file: File) => {
  handleFileSelect(file);
  return false;
};

const copyLink = (fileId: string) => {
  // 模拟复制链接
  message.success('链接已复制到剪贴板！');
};

const deleteFile = (fileId: string) => {
  files.value = files.value.filter(f => f.id !== fileId);
  message.success('文件已删除！');
};

const formatFileSize = (size: number) => {
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
  if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
  return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
};
</script>

<template>
  <div class="cloud-storage">
    <a-card :bordered="false" class="upload-card">
      <a-upload-dragger
        :showUploadList="false"
        :beforeUpload="beforeUpload"
        class="upload-area"
      >
        <p class="ant-upload-drag-icon">
          <cloud-upload-outlined />
        </p>
        <p class="ant-upload-text">点击或拖拽文件上传到云端</p>
      </a-upload-dragger>

      <div class="upload-options">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="密码保护">
              <a-input-password
                v-model:value="password"
                placeholder="可选"
                class="password-input"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="有效期">
              <a-select v-model:value="expiryDays" class="expiry-select">
                <a-select-option :value="1">1天</a-select-option>
                <a-select-option :value="7">7天</a-select-option>
                <a-select-option :value="30">30天</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <a-progress
        v-if="isUploading"
        :percent="uploadProgress"
        :status="uploadProgress === 100 ? 'success' : 'active'"
        class="upload-progress"
      />
    </a-card>

    <a-card :bordered="false" class="files-card">
      <template #title>云端文件</template>
      <a-list
        :dataSource="files"
        class="files-list"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <a-card :bordered="false" class="file-item">
              <a-row align="middle" :gutter="16">
                <a-col :span="16">
                  <a-typography-text strong>{{ item.fileName }}</a-typography-text>
                  <br />
                  <a-space>
                    <a-typography-text type="secondary">
                      {{ new Date(item.uploadTime).toLocaleString() }}
                    </a-typography-text>
                    <a-typography-text type="secondary">
                      {{ formatFileSize(item.fileSize) }}
                    </a-typography-text>
                    <a-tag>下载次数: {{ item.downloadCount }}</a-tag>
                  </a-space>
                </a-col>
                <a-col :span="8" style="text-align: right">
                  <a-space>
                    <a-button type="primary" @click="copyLink(item.id)">
                      <template #icon><copy-outlined /></template>
                      复制链接
                    </a-button>
                    <a-button danger @click="deleteFile(item.id)">
                      <template #icon><delete-outlined /></template>
                      删除
                    </a-button>
                  </a-space>
                </a-col>
              </a-row>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<style scoped>
.cloud-storage {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.upload-card {
  background: var(--bg-light);
}

.upload-area {
  margin: 2rem 0;
  background: var(--bg-dark);
}

.upload-options {
  margin-top: 2rem;
}

.password-input,
.expiry-select {
  width: 100%;
}

.files-card {
  flex: 1;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
}

.file-item {
  background: var(--bg-dark);
  margin-bottom: 1rem;
}

/* 覆盖一些 Ant Design Vue 的默认样式 */
:deep(.ant-upload-drag) {
  background: var(--bg-dark);
  border: 2px dashed rgba(255, 255, 255, 0.1);
}

:deep(.ant-upload-drag:hover) {
  border-color: var(--primary-color);
}

:deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.ant-form-item-label > label) {
  color: var(--text-secondary);
}

:deep(.ant-select-selector) {
  background: var(--bg-dark) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.ant-select-selection-item) {
  color: var(--text-primary) !important;
}
</style> 